<template>
  <div class="zongduanmian-main-con">
    <div class="zongduanmian_title">
      <span>纵断面分析</span>
    </div>

    <div class="zongduanmian_form">
      <button @click="zdmfxstart">选择管线</button>
      <button @click="zdmfxend"> 重置</button>
      <button @click="profileAnalysis">查询</button>

    </div>
    <div v-for="(item,i) in lonlat" :key="i">
      <span>{{item.properties}}</span> <button @click="deletedata(i)">删除</button> <br>
    </div>
    <div class="zongduanmian_result">
      <div class="zongduanmian_result_line"></div>
      <div class="zongduanmian_result_title">
        <span>查询结果</span>
      </div>


    </div>
  </div>
</template>

<script>
  import { getBoxLineData } from "@/api/http"
  import Bus from "@/js/EventBus";
  export default {
    name: "ZongDuanMianAnalysis",
    components: {

    },
    data () {
      return {
        valueMultiple: [],
        lonlat: []

      };
    },
    mounted () {
      Bus.$on("zdmfxid", (e) => {
        console.log(e);
        // this.clearAllDrawn();
        // this.getData(e);
        this.searchIdData(e)
      });

    },
    methods: {
      async searchIdData (id) {
        let ID = JSON.parse(id)
        const res = await getBoxLineData(`UserID='${ID.UserID}'`)
        this.lonlat.push(res.features[0])
      },
      deletedata (i) {
        // console.log(this.lonlat[i])
        let id = this.lonlat[i].properties.UserID
        Bus.$emit("ltfxdelete", id);
        this.lonlat.splice(i, 1)

      },
      zdmfxstart () {
        Bus.$emit("zdmfx", true);
      },
      zdmfxend () {
        Bus.$emit("zdmfx", false);
      },
      profileAnalysis () {
        console.log(this.lonlat, "================================")

      },
    },
  };
</script>

<style lang="scss" scoped>
  .zongduanmian-main-con {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 301px;
    height: 712px;
    background: url('../../assets/rightMenu/selectInfo/selectInfo_bg.png');
    background-size: 100% 100%;
  }

  .zongduanmian_title {
    width: 280px;
    height: 35px;
    box-sizing: border-box;
    background: url("@/assets/panelTree/dtml_bg_title.png") no-repeat;
    font-family: SourceHanSansCN-Regular;
    font-size: 18px;
    background-size: 100% 100%;
    text-align: left;
    padding-left: 50px;
    line-height: 40px;
    // background-color: red;
    margin: 20px 0 0 10px;
  }

  .zongduanmian_title span {
    font-family: SourceHanSansCN-Regular;
    font-size: 18px;
    color: #c8e9ff;
  }

  .zongduanmian_result_title {
    width: 300px;
    height: 16px;
    background: url("../../assets/rightMenu/selectInfo/monitor_form_title.png") 0px 2px no-repeat;
    text-align: center;
    color: #00baff;
    margin-bottom: 20px;
  }

  .zongduanmian_result_title span {
    font-family: SourceHanSansCN-Regular;
    font-size: 14px;
    line-height: 12px;
  }

  .zongduanmian_result {
    flex: 1;
  }

  .zongduanmian_result_line {
    width: 289px;
    height: 1px;
    background: url(../../assets/rightMenu/selectInfo/boundary_line.png);
    background-size: 100% 100%;
    margin-bottom: 20px;
  }


  ::v-deep {

    .el-form-item__label {
      font-family: SourceHanSansCN-Regular !important;
      font-size: 14px !important;
      line-height: 44px !important;
      color: #daf0ff !important;
      ;
      padding: 0 0 0 16px !important;
    }
  }
</style>